<template>
	<div class="box">
		<Category title="美食">
			<img src="../01_src_分析脚手架/assets/logo.png">
		</Category>
		<Category title="游戏">
			<ul>
				<li v-for="(list,index) in games" :key="index">{{list}}</li>
			</ul>
		</Category>
		<Category title="电影">
			<ul>
				<li v-for="(list,index) in films" :key="index">{{list}}</li>
			</ul>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category.vue'
	export default {
		name: 'App',
		components: {
			Category
		},
		data() {
			return {
				foods: ['火锅', '烧烤', '小龙虾', '牛排'],
				games: ['红警', 'cf', 'csgo', 'lol'],
				films: ['教父1', '教父2', '教父3', '功夫之王'],
			}
		},
	}
</script>

<style>
	.box {
		display: flex;
		justify-content: space-around;
	}
</style>
